<template>
  <div>
    <h2>当前计数：{{ counter }}</h2>
    <h2>计数*2：{{ doubleCounter }}</h2>
    <button @click="add">+1</button>
    <button @click="minus">-1</button>

    <div class="mouse">
      <p>mouseX:{{ mouseX }}</p>
      <p>mouseY:{{ mouseY }}</p>
      
    </div>
  </div>
</template>

<script>

import  {useCounter, useMousePosition,useTitle} from './hooks/index.js'

export default {
  setup () {
    
    const {counter,doubleCounter,add,minus,}=useCounter() //钩子函数

    const {mouseX,mouseY}=useMousePosition()

    useTitle('首页')
    
    setTimeout(()=>{
      useTitle('关于')
    },2000)

    // document.title='首页'
    return {
      counter,
      doubleCounter,
      add,
      minus,
      mouseX,
      mouseY,
  
    }
  }
}
</script>

<style lang="scss" scoped>

</style>